<template>
    <div>
        <!--添加模态框-->
        <div>
            <el-dialog title="添加管理员" :visible.sync="addDialog" width="30%" @close="addClose">
                <el-form ref="addForm" :model="user" label-width="80px" :rules="addRules" status-icon label-position="top">
                    <el-form-item label="管理员名称" prop="userName">
                        <el-input v-model="user.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="管理员编号" prop="userCode">
                        <el-input v-model.number="user.userCode"></el-input>
                    </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="user.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="手机" prop="cellphone">
                            <el-input v-model="user.cellphone"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="user.email"></el-input>
                        </el-form-item>
                    <el-form-item label="是否锁定" prop="locked">
                        <el-select v-model="user.locked" placeholder="请选择是否锁定账户">
                            <el-option label="是" value="0"></el-option>
                            <el-option label="否" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-tree :data="rList"
                                 highlight-current
                                 show-checkbox
                                 ref="tree"
                                 node-key="roleId"
                                 :props="defaultProps"
                                 @check-change="handleCheckChange"></el-tree>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addRule()">立即添加</el-button>
                        <el-button @click="cancle">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <!--更新模态框-->
        <div>
            <el-dialog title="更新管理员" :visible.sync="modifyDialog" width="30%" @close="modifyClose">
                <el-form ref="modifyForm" :model="user" label-width="80px" :rules="modifyRules" status-icon label-position="top">
                    <el-form-item label="管理员ID" v-if="false" >
                        <el-input v-model="user.managerId"></el-input>
                    </el-form-item>
                    <el-form-item label="管理员名称" prop="userName">
                        <el-input v-model="user.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="管理员编号" prop="userCode">
                        <el-input v-model="user.userCode"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="user.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="手机" prop="cellphone">
                        <el-input v-model="user.cellphone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="user.email"></el-input>
                    </el-form-item>
                    <el-form-item label="是否锁定" prop="locked">
                        <el-select v-model="user.locked" placeholder="请选择是否锁定账户">
                            <el-option label="是" value="0"></el-option>
                            <el-option label="否" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-tree v-if="isModify"
                                 :data="rList"
                                 highlight-current
                                 show-checkbox
                                 ref="tree"
                                 node-key="roleId"
                                 :props="defaultProps"
                                 @check-change="handleCheckChange">
                        </el-tree>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="modifyRule">立即更新</el-button>
                        <el-button @click="cancle">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <el-container style="width: 100%;background: white">
            <!--顶部操作栏-->
            <el-header>

                <div style="width: 500px;background: olivedrab">
                    <div style="margin-top: 15px;width: 300px;float:left;">
                        <el-input placeholder="请输入内容" v-model="name" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                        </el-input>
                    </div>
                    <div style="float: right;margin-top: 15px">
                        <el-button type="primary" plain @click="addDialog = true">添加管理员</el-button>
                    </div>
                </div>
            </el-header>
            <!--主体列表-->
            <el-main>
                <div>
                    <template>
                        <el-table :data="userList" stripe style="width: 100%" border
                                  :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
                            <el-table-column style="margin: 0 auto; width: 20%" type="index"
                                             label="序号"></el-table-column>
                            <el-table-column style="margin: 0 auto; width: 20%" prop="managerId" v-if="false"
                                             label="ID"></el-table-column>
                            <el-table-column style="margin: 0 auto; width: 40%" prop="userName"
                                             label="姓名"></el-table-column>
                            <el-table-column style="margin: 0 auto; width: 40%" prop="userCode"
                                             label="编号"></el-table-column>
                            <el-table-column style="margin: 0 auto; width: 40%" prop="cellphone"
                                             label="电话"></el-table-column>
                            <el-table-column style="margin: 0 auto; width: 40%" prop="email"
                                             label="邮箱"></el-table-column>
                            <el-table-column style="margin: 0 auto; width: 40%" prop="locked"
                                             label="是否被锁定">
                                <template slot-scope="scope">
                                    {{ scope.row.locked === 1 ?  '否': '' }}
                                    {{ scope.row.locked === 0 ?  '是': '' }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" style="width: 40%">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="toModify(scope.row)">编辑
                                    </el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="remove(scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </el-main>
            <!--分页-->
            <el-footer>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="[3, 4, 5, 6]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Manager",
        data() {
            return {
                user:{
                    managerId:"",
                    roleList:[],
                    userName:"",
                    userCode:"",
                    cellphone:"",
                    email:"",
                    locked:"",
                    password:"",
                },
                name:'',
                roleId:"",
                rList:[],
                userList: [],
                pageNum: 1,
                pageSize: 3,
                total: 0,
                addDialog: false,
                modifyDialog: false,

                defaultProps: {
                    children: 'roleList',
                    label: 'roleName'
                },
                newRolePermission:[],//添加管理员类型时选中的角色ID数组
                isModify: false,
                addRules: {
                    userName: [
                        {required: true, message: '请输入管理员名称', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在3到10个字符之间', trigger: 'blur'}
                    ],
                    userCode:[
                        {required: true, message: '请输入管理员编号', trigger: 'blur'},
                        {type: 'number', message: '角色编号必须为数字'}
                    ],
                    password:[
                        {required: true, message: '请输入管理员密码', trigger: 'blur'},
                        { min: 3, max: 8, message: "密碼在3-8個字符之間", trigger: "blur" }
                    ],
                    cellphone:[
                        {required: true, message: '请输入管理员电话', trigger: 'blur'},
                        { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }

                    ],
                    email:[
                        {required: true, message: '请输入管理员邮箱', trigger: 'blur'},

                    ]
                },
                modifyRules:{
                    userName: [
                        {required: true, message: '请输入管理员名称', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在3到10个字符之间', trigger: 'blur'}
                    ],
                    userCode:[
                        {required: true, message: '请输入管理员编号', trigger: 'blur'},
                        {type: 'number', message: '角色编号必须为数字'}
                    ],
                    password:[
                        {required: true, message: '请输入管理员密码', trigger: 'blur'},
                        { min: 3, max: 8, message: "密碼在3-8個字符之間", trigger: "blur" }
                    ],
                    cellphone:[
                        {required: true, message: '请输入管理员电话', trigger: 'blur'},
                        { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }

                    ],
                    email:[
                        {required: true, message: '请输入管理员邮箱', trigger: 'blur'},

                    ],
                }

            }
        },
        created() {
            this.search()
            let url = this.$baseUrl + "/role/roleList"
            this.axios.get(url).then((res) => {
                this.rList = res.data
            })
        },
        methods: {
            //查询
            search() {
                let url = this.$baseUrl +"/list"
                this.axios.get(url, {
                    params: {
                        userName: this.name,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    }
                }).then((res) => {
                    console.log(res)
                    this.userList = res.data.data.list
                    this.pageSize = res.data.data.pageSize
                    this.pageNum = res.data.data.pageNum
                    this.total = res.data.data.total
                })
            },
            //添加
            add() {
                let url = this.$baseUrl + "/addManager"
                this.axios.post(url,{
                    ManagerId:this.user.managerId,
                    userName:this.user.userName,
                    userCode:this.user.userCode,
                    cellphone:this.user.cellphone,
                    email:this.user.email,
                    locked:this.user.locked,
                    password:this.user.password,
                    rolelist:this.user.roleList,
                }).then((res) => {
                    if (res.data.code == 203) {
                        this.$message.success("添加成功")
                        this.user = {
                            roleList: []
                        }
                        this.addDialog = false;
                        this.search()
                        this.$refs.tree.setCheckedKeys([])
                    } else {
                        this.$message.error("添加失败")
                    }
                })
            },
            //更新前回显数据
            toModify(row) {
                this.isModify = true
                this.user = {}
                this.user.roleList = []
                let ManagerId = row.managerId
                console.log(ManagerId);
                let url = this.$baseUrl + "/findManagerVo"
                this.axios.get(url, {
                    params: {
                        managerId:ManagerId
                    }
                }).then((res) => {
                    console.log(res);
                    this.modifyDialog = true
                    this.user = res.data.data

                    let list = this.user.rolelist
                    console.log(list);
                    this.$nextTick(() => {
                        this.$refs.tree.setCheckedKeys(list);//获取已经设置的资源后渲染
                    });
                    isModify: false
                })
            },
            modify() {
                let url = this.$baseUrl + "/modifyManager"
                console.log(this.user.managerId);
                this.axios.put(url,{
                    managerId:this.user.managerId,
                    userName:this.user.userName,
                    userCode:this.user.userCode,
                    cellphone:this.user.cellphone,
                    email:this.user.email,
                    locked:this.user.locked,
                    password:this.user.password,
                    rolelist:this.user.roleList,
                }).then((res) => {
                    console.log(res);
                    if (res.data.code == 203) {
                        this.$message.success("更新成功")
                        this.user = {}

                        this.modifyDialog = false;
                        this.search()
                    } else {
                        this.$message.error("更新失败")
                    }
                })
            },
            //删除
            remove(row) {
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ManagerId = row.managerId
                    console.log(ManagerId)
                    let url = this.$baseUrl + "/removeManager/"+ManagerId
                    this.axios.delete(url).then((res) => {
                        if (res.data.code == 208) {
                            this.$message.success("删除成功")
                            this.search()
                        } else {
                            this.$message.error("删除失败")
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            //分页
            handleSizeChange(val) {
                this.pageSize = val
                this.search()
            },
            handleCurrentChange(val) {
                this.pageNum = val
                this.search()
            },
            //获取选中的权限ID
            handleCheckChange() {
                let res = this.$refs.tree.getCheckedNodes()//内置的方法获得选中的ID

                let arr = []
                res.forEach((item) => {
                    arr.push(item.roleId)
                })
                this.user.roleList = this.unique(arr)
               /* console.log(this.user.)*/
            },
            //对权限ID数组进行去重
            unique(arr){
                let newArr = []
                let len = arr.length
                for (let i = 0; i < len; i++) {
                    if(newArr.indexOf(arr[i]) == -1){
                        newArr.push(arr[i])
                    }
                }
                return newArr
            },
            //关闭模态框
            cancle() {
                this.addDialog = false
                this.modifyDialog = false
                this.user = {}
                this.user.roleList = []
                isModify: false
            },
            addClose(){
                this.$refs.addForm.resetFields()//清除表单数据
                this.user = {}
                this.user.roleList = []
            },
            modifyClose(){
                this.$refs.modifyForm.resetFields()//清除表单数据
                this.user = {}
                this.user.roleList = []
            },
            addRule(){
                this.$refs.addForm.validate((valid)=>{
                    if(valid){
                        this.add()
                    }else {
                        return ;
                    }
                })
            },
            modifyRule(){
                this.$refs.modifyForm.validate((valid)=>{
                    if(valid){
                        this.modify()
                    }else {
                        return ;
                    }
                })
            }
        }
    }
</script>


<style scoped>

</style>